/* eslint-disable no-unused-vars */
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Button } from "antd";
import React, { forwardRef, HTMLAttributes, CSSProperties } from "react";
import Item from './item';

export default function SortableItem({ item }) {
  const {
    isDragging,
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({ id: item.key });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  return (
    <Item
      ref={setNodeRef}
      style={style}
      withOpacity={isDragging}
      item={item}
      {...attributes}
      {...listeners}
    ></Item>
  );
}
